<template>
	<div class="header">
		<div class="content-wrapper">
			<div class="avatar">
				<img width="64" height="64" v-bind:src="seller.avatar">
			</div>
			<div class="content">
				<div class="title">
					<span class="brand"></span>
					<span class="name">{{seller.name}}</span>
				</div>
				<div class="description">
					{{seller.description}}/{{seller.deliveryTime}}分钟到达
				</div>
				<div class="support" v-if="seller.supports"><!-- 使用v-if是因为异步请求数据，获取数据过程比页面加载要慢。不加v-if，seller.supports的值为undefined -->
					<span class="icon" :class="this.classMap[seller.supports[0].type]"></span>
					<span class="text">{{seller.supports[0].description}}</span>
				</div>
			</div>
			<div class="support-count" v-if="seller.supports" @click="showDetail">
				<span class="count">{{seller.supports.length}}</span>
        <i class="icon-keyboard_arrow_right"></i>
			</div>
		</div>
		<div class="bulletin-wrapper" @click="showDetail">
			<span class="bulletin-title"></span>
			<span class="bulletin-text">{{seller.bulletin}}</span>
			<i class="icon-keyboard_arrow_right"></i>
		</div>
		<div class="background">
			<img v-bind:src="seller.avatar" width="100%" height="100%">
		</div>
		<transition name="fade">
			<div class="detail" v-show="detailShow">
				<div class="detail-wrapper"><!-- 外层wrapper,min-height: 100% -->
					<div class="detail-main"><!-- 内容层 padding-bottom: 64px -->
						<h1 class="name">{{seller.name}}</h1>
						<div class="star-wrapper">
							<v-star :size="48" :score="seller.score"></v-star>
						</div>
						<div class="title">
							<div class="line"></div>
							<div class="text">优惠信息</div>
							<div class="line"></div>
						</div>
						<ul v-if="seller.supports" class="supports">
							<li class="support-item" v-for="(item,index) in seller.supports" v-bind:key="index">
								<span class="icon" v-bind:class="classMap[seller.supports[index].type]"></span>
								<span class="text">{{item.description}}</span>
							</li>
						</ul>
						<div class="title">
							<div class="line"></div>
							<div class="text">商家广告</div>
							<div class="line"></div>
						</div>
						<div class="bulletin">
							<p class="content">{{seller.bulletin}}</p>
						</div>
					</div>
				</div>
				<div class="detail-close" @click="hideDetail">
					<i class="icon-close"></i><!-- 要适应内容显示的关闭按钮 margin-top: -64px -->
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
import Star from '@/components/star'

export default {
	name:'v-header',
	props: {
		seller: {
			type: Object
		}
	},
	components:{
		'v-star': Star
	},
	data () {
		return {
			detailShow: false  //通过改变数据detailShow 的true/false，控制元素的显示/隐藏
		}
	},
	created () {
    this.classMap = ['decrease','descount','guarantee','invoice','special']
	},
	methods: {
		showDetail () {
			this.detailShow = true
		},
		hideDetail () {
			this.detailShow = false
		}
	}
}
</script>

<style lang="stylus" scoped>
//bg-image()
@import  "../../common/stylus/mixin"

.header 
	position: relative
	overflow: hidden 
	color: #fff
	background: rgba(7, 17, 27, 0.5) 
	.content-wrapper
		position: relative
		padding: 24px 12px 18px 24px 
		font-size: 0
		.avatar
			display: inline-block
			vertical-align: top
		.content
			display: inline-block
			margin-left: 16px
			.title
				margin: 2px 0 8px 0
				.brand
					display: inline-block
					vertical-align: top 
					width: 30px
					height: 18px
					bg-image('brand')
					background-size: 30px 18px
					background-repeat: no-repeat
				.name
					margin-left: 6px
					font-size: 16px
					line-height: 18px
					font-weight: bold
			.description
				margin-bottom: 10px
				line-height: 12px
				font-size: 12px
			.support
				.icon
					display: inline-block
					vertical-align: top
					width: 12px
					height: 12px
					margin-right: 4px
					background-size: 12px 12px
					background-repeat: no-repeat
					&.decrease
						bg-image('decrease_1')
					&.descount
						bg-image('discount_1')
					&.guarantee
						bg-image('guarantee_1')
					&.invoice
						bg-image('invoice_1')
					&.special
						bg-image('special_1')
				.text 
					line-height: 12px
					font-size: 10px 
		.support-count
			position: absolute
			right: 12px
			bottom: 14px
			padding: 0 8px
			height: 24px
			line-height: 24px
			border-radius: 14px
			background: rgba(0, 0, 0, 0.2)
			text-align: center
			.count 
				font-size: 10px
				vertical-align: top
			.icon-keyboard_arrow_right
				margin-left: 2px
				line-height: 24px
				font-size: 10px
	.bulletin-wrapper
		position: relative
		height: 28px
		line-height: 28px
		padding: 0 22px 0 12px
		white-space: nowrap 
		overflow hidden
		text-overflow: ellipsis
		background: rgba(7, 17, 27, 0.2)
		.bulletin-title
			display: inline-block
			vertical-align: top
			margin-top: 9px
			width: 22px
			height: 12px
			bg-image('bulletin')
			background-size: 22px 12px
			background-repeat: no-repeat
		.bulletin-text
			margin: 0 4px
			font-size: 10px
		.icon-keyboard_arrow_right
			position: absolute 
			font-size: 10px
			right: 12px
			top: 11px
	.background
		position: absolute 
		top: 0
		left: 0
		width: 100%
		height: 100%
		z-index: -1
		filter: blur(10px)
	.detail
		position: fixed
		z-index: 100
		top: 0
		left: 0
		width: 100%
		height: 100%
		overflow: auto
		backdrop-filter: blur(10px)
		opacity: 1
		background: rgba(7, 17, 27, 0.8)
		&.fade-enter-active, &.fade-leave-active
			transition: all 0.5s ease
		&.fade-enter, &.fade-leave-active
			opacity: 0
			background: rgba(7, 17, 27, 0)
		.detail-wrapper
			width: 100%
			min-height: 100% //最小高度100%，x在屏幕下
			.detail-main
				margin-top: 64px
				padding-bottom: 64px
				.name
					line-height: 16px
					text-align: center
					font-size: 35px
					font-weight: 700
				.star-wrapper 
					margin-top: 18px
					padding: 2px 0
					text-align: center
				.title
					display: flex
					width: 80%
					margin: 24px auto //左右居中
					.line
						flex: 1
						position: relative
						top: -7px			//线向上移7px，因为字体为14px，不然线最底部，目的是实现线在行中
						border-bottom: 1px solid rgba(255, 255, 255, 0.2)	//实现一条横线的效果，border-bottom
					.text
						padding: 0 12px
						font-weight: 700
						font-size: 14px	//top:-7px
				.supports
					width: 80%	//width：80%还得加margin: 0 auto
					margin: 0 auto
					.support-item
						padding: 0 12px
						margin-bottom: 12px
						font-size: 0
						&:last-child		
							margin-bottom: 0 //不清楚作用
						.icon
							display: inline-block
							width: 16px
							height: 16px
							vertical-align: top	//向上居中，不添加则字体往下跑
							margin-left: 6px
							background-size: 16px 16px//background-size必备搭配background-repeat
							background-repeat: no-repeat
							&.decrease								//选择器，与class="icon"同级
								bg-image('decrease_2')	//添加图片的方法
							&.descount
								bg-image('discount_2')
							&.guarantee
								bg-image('guarantee_2')
							&.invoice
								bg-image('invoice_2')
							&.special
								bg-image('special_2')
						.text
							line-height: 16px
							font-size: 12px
				.bulletin
					width: 80%
					margin: 0 auto
					line-height: 24px
					font-size: 12px
		.detail-close
			position: relative
			width: 32px
			height: 32px
			margin: -64px auto 0 auto 
			clear: both
			font-size: 14px
</style>